<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.staticfile.org/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/pageVideo.css">
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.1/skins/default/aliplayer-min.css" />
    <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.1/aliplayer-min.js"></script>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top runoob-header" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand runoob-title" href="/">xxxx</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->

            <div class="collapse navbar-collapse">
                <div class="col-sm-3 col-md-3">
                    <form class="navbar-form" role="search" action="/index.php" method="get">
                        <div class="input-group">
                            <input type="text" class="form-control" name="s" value="" placeholder="输入关键字……">
                            <div class="input-group-btn">
                                <button class="btn btn-default" type="submit"><i
                                        class="glyphicon glyphicon-search"></i></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
    <div class="container">
        <div class="row list-row">

            <div class="col-md-12">
                <h3 class="page-header"><i class="fa fa-list"></i>
                    视频播放 </h3>
            </div>
            <div class="col-md-12">
                <div class="prism-player" id="player-con"></div>
            </div>
        </div>

        <div style="height: 1000px;width:100px" style="background-color: pink;">

        </div>

        <!-- /.row -->
        <br>
        <hr>
        @@include('./common/footer.html')
    </div>
</body>
<script>
//  https://player.alicdn.com/aliplayer/setting/setting.html 
var player = new Aliplayer({
    "id": "player-con",
    "source": "https://player.alicdn.com/video/aliyunmedia.mp4",
    "width": "100%",
    "height": "500px",
    "autoplay": true,
    "isLive": false,
    "rePlay": false,
    "playsinline": true,
    "preload": true,
    "controlBarVisibility": "hover",
    "useH5Prism": true
}, function (player) {
    console.log("The player is created");
    }
);
</script>
</html>